<script setup>
import DetailContainer from "@/components/AdminConponents/DetailContainer.vue";
import avatar from '@/assets/images/default.png'
import {useRoute, useRouter} from "vue-router"
import {onMounted, ref} from "vue";
import {adminDetailAPI} from "@/api/AdminApi/admin.js";
import { formatTime } from '@/utils/format'

const route = useRoute()
const adminInfo = ref({})
const getAdminInfo = async (id = route.params.id) => {
  const res = await adminDetailAPI(id)
  adminInfo.value = res.data
}
onMounted(() => getAdminInfo())

// 编辑管理员
const router = useRouter()
const adminEdit = (id) => {
  router.push(`/admin/admin/edit/${id}`)
}
</script>

<template>
  <DetailContainer title="管理员详情">
    <template #headerRight>
      <el-button @click="adminEdit(adminInfo.id)" type="success">编辑管理员</el-button>
    </template>
    <template #bodyTop>
      <el-descriptions border :column="1" :title="`${adminInfo.username}的信息`">
        <el-descriptions-item label="头像">
          <el-image style="width: 100px; height: 100px" :src="adminInfo.avatar || avatar"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">{{ adminInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ adminInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ adminInfo.phone }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ adminInfo.idNumber }}</el-descriptions-item>
        <el-descriptions-item label="管理员权限">
          {{ adminInfo.status === 0 ? '最高管理员' : '普通管理员' }}
        </el-descriptions-item>
        <el-descriptions-item label="管理员状态">
          {{ adminInfo.state === false ? '正常' : '锁定'}}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #bodyBottom>
      <el-descriptions border :column="4">
        <el-descriptions-item label="创建时间">{{formatTime(adminInfo.createTime)}}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{formatTime(adminInfo.updateTime)}}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{adminInfo.createUser}}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{adminInfo.updateUser}}</el-descriptions-item>
      </el-descriptions>
    </template>
  </DetailContainer>
</template>

<style scoped>

</style>
